<template>
	<div v-permission="'收货地址'" class="bg">
		<div class="bg-box">
			<div v-if="dataList.length" v-for="(item,inx) in dataList" :key="inx" class="bg-item" @click="editBtn(item)">
		 
		 <div class="title flex flexBetween">
		  <div class="f1" >{{ item.city_province}}{{ item.detail||"" }}</div>
		  <div class="title-icon-wrap" >
			  <img class="title-icon" src="../../assets/addresss/edit.png" alt="">
		  </div>
		 </div>
		 <div class="name">{{ item.receiver }}</div>
		 <div class="name">{{ item.phone }}</div>
	  </div>
	  <nut-empty v-else image="empty" description="无内容"></nut-empty>
	  <div class="bg-btn-box">
		  <nut-button   block type="primary"  color="linear-gradient(to right, #3EBD33, #9FDF4F)" @click="addBtn">添加地址</nut-button>
	  </div>
	  <addAddRess ref="addRef" @reFresh="reFresh"/>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import useAddress from '@/composable/address/useAddress'
import addAddRess from './addAddRess.vue';
const {addRef,addBtn,editBtn,dataList,reFresh}  = useAddress();
 
</script>
<style scoped lang="scss">
 .bg{
	background:#F8F9FA ;

	.bg-box{
		padding:20px 30px;
	}
	.bg-item{
		padding:30px 30px;
		background:#fff;
		border-radius: 20px;
		margin-bottom:20px;
		.title{
			font-size:30px;
			color:#000;
			font-weight: 500;
			padding-bottom:10px;
			 
		}
		.name{
          font-size: 26px;
		  color:#666;
		  padding-bottom:10px;
		}
	}
	.bg-btn-box{
		position: fixed;
		background:#fff;
		left:0;
		right:0;
		bottom:0;
		height:112px;
		padding-top:20px;
		padding-left:60px;
		padding-right:60px;
		padding-bottom: 30px;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.title-icon-wrap{
		width:30px ;
		height:30px;
		padding:4px 0 4px 0;
	}
	.title-icon{
		 
		width:30px;
		height:30px;
 
		 
	}
 }
</style>
